<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">

<link rel="stylesheet" href="lib/swiper/css/swiper.css">
<script src="lib/swiper/js/swiper.js"></script>

<style>
	.swiper-container {
	    width: 600px;
	    height: 300px;
	}  
</style>
</head>
<body>
    <div class="swiper-container a">
        <div class="swiper-wrapper">
            
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      
    </div>


    <script type="text/javascript">
      //swiper初始化过早。
      setTimeout(function(){

        var datalist = ["1111","22222","33333"]

        var newlist =datalist.map(item=>`<div class="swiper-slide">${item}</div>`)
        // console.log(newlist)
        document.querySelector(".swiper-wrapper").innerHTML = newlist.join('')


        new Swiper ('.a',{
          // direction: 'vertical'
          loop:true,
              // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          }
        })
        
      },2000)
      



    	
    </script>
</body>
</html>